<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>resource</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/rem.js"></script>
		<link rel="stylesheet" type="text/css" href="css/resource_a.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<!--首页-->
		<div class="article">
			<header>
				<div class="article_menu">
					<i class="iconfont icon-ego-menu"></i>
				</div>
				<div class="article_logo">
					<img src="img/logo.png"/>
				</div>
				<div class="article_serve">
					<i class="iconfont icon-sousuo"></i>
				</div>
			</header>
			
			<!--内容-->
			<section class="article_content">
				<!--轮播图-->
				<div class="carousel">
					<div class="carousel_see">
						<ul class="pic_box">
							<li>
								<img src="img/carousel.jpg"/>
								<div class="carousel_content">
									<p class="con_desc">省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
									<div class="con_date">
										<div class="con_see">
											<i class="iconfont icon-xin">120</i>
											<i class="iconfont icon-yj">560</i>
										</div>
										<p class="date">12月26日07:33:43</p>
									</div>
								</div>
							</li>
							<li>
								<img src="img/carousel.jpg"/>
								<div class="carousel_content">
									<p class="con_desc">省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
									<div class="con_date">
										<div class="con_see">
											<i class="iconfont icon-xin">120</i>
											<i class="iconfont icon-yj">560</i>
										</div>
										<p class="date">12月26日07:33:43</p>
									</div>
								</div>
							</li>
							<li>
								<img src="img/carousel.jpg"/>
							</li>
						</ul>
						<ul class="pannel">
						</ul>
					</div>
				</div>
				
				<!--资源首页-->
				<div class="resource_content">
					<ul class="resource_list">
						<li class="list_content" id="lista">
							<div class="resource_pic">
								<img src="img/resource_pic.jpg"/>
							</div>
							<div class="resource_pic_desc">
								<h3 class="resource_title">腾讯视频</h3>
								<p>腾讯视频贴片广告、60秒贴片广告质量超棒、欢迎尝试......</p>
								<div class="resource_view">
									<span>2015 - 9 - 3</span>
									<i class="iconfont icon-yanjing">250</i>
								</div>
							</div>
						</li>
						<li class="list_content">
							<div class="resource_pic">
								<img src="img/resource_pic.jpg"/>
							</div>
							<div class="resource_pic_desc">
								<h3 class="resource_title">腾讯视频</h3>
								<p>腾讯视频贴片广告、60秒贴片广告质量超棒、欢迎尝试......</p>
								<div class="resource_view">
									<span>2015 - 9 - 3</span>
									<i class="iconfont icon-yanjing">250</i>
								</div>
							</div>
						</li>
						<li class="list_content">
							<div class="resource_pic">
								<img src="img/resource_pic.jpg"/>
							</div>
							<div class="resource_pic_desc">
								<h3 class="resource_title">腾讯视频</h3>
								<p>腾讯视频贴片广告、60秒贴片广告质量超棒、欢迎尝试......</p>
								<div class="resource_view">
									<span>2015 - 9 - 3</span>
									<i class="iconfont icon-yanjing">250</i>
								</div>
							</div>
						</li>
					</ul>
					<p class="load_more">加载更多</p>
				</div>
				
				<!--资源介绍页-->
				<div class="resource_introduce">
					<div class="introduce_desc">
						<h2 class="introduce_title">腾讯视频</h2>
						<div class="introduce_time">
							<span>2016年5月26日</span>
							<i class="iconfont icon-yj">560</i>
						</div>
						<p class="introduce_explain">腾讯视频贴片广告，60秒贴片广告，质量超棒！<br />欢迎尝试，价格可谈。</p>
						<div class="introduce_pic">
							<img src="img/introduce_pic.jpg"/>
						</div>
						<p class="introduce_contact">联系方式:</p>
					</div>
					<div class="contact_information">
						<ul>
							<li>
								<i class="iconfont icon-renxiang"></i>
								<p>宇皓</p>
							</li>
							<li>
								<i class="iconfont icon-dianhua"></i>
								<p>020-123456</p>
							</li>
							<li>
								<i class="iconfont icon-xinfeng8"></i>
								<p>hotane@qq.com</p>
							</li>
						</ul>
					</div>
				</div>
			</section>
			<!--尾部-->
			<footer>
				<a href="index.html" class="footer_nav">
					<div class="nav_photoa">
						<img src="img/nav_a.png"/>
					</div>
					<p class="nav_desc">首页</p>
				</a>
				<a href="gimc.html" class="footer_nav">
					<div class="nav_photob">
						<img src="img/nav_bb.png"/>
					</div>
					<p class="nav_desc">GIMC</p>
				</a>
				<a href="essay.html" class="footer_nav">
					<div class="nav_photoc">
						<img src="img/nav_c.png"/>
					</div>
					<p class="nav_desc">文章</p>
				</a>
				<a href="resource_a.html" class="footer_nav">
					<div class="nav_photod">
						<img src="img/rnav_d.png"/>
					</div>
					<p class="nav_desc nav_active_a">资源</p>
				</a>
				<a href="curriculum.html" class="footer_nav">
					<div class="nav_photoe">
						<img src="img/nav_e.png"/>
					</div>
					<p class="nav_desc">学院</p>
				</a>
			</footer>
		</div>
		
		<!--返回，分享-->
		<div class="back_share">
			<i class="iconfont icon-fanhui"></i>
			<p>新闻资讯</p>
			<i class="iconfont icon-fenxiang" id="shareopen"></i>
			<ul class="share_content">
				<li class="iconfont icon-weixin">微信</li>
				<li class="iconfont icon-qq">QQ</li>
				<li class="iconfont icon-xinlang">新浪</li>
			</ul>
		</div>
		<!--菜单页登录页-->
		<section class="register_content" >
			<div class="register_serve">
				<i id="close_a" class="iconfont icon-jiaochacross78"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<div class="register_select">
				<a href="" class="select_pic">
					<div class="pic_fra">
						<img src="img/serve_h.jpg"/>
					</div>
				</a>
				<a class="select_button">立即登录</a>
				<a class="forget">忘记密码</a>
			</div>
			<ul class="register_menu">
				<li class="menu_content">
					<p>GIMC</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>文章</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>资源</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>课程</p>
					<p>></p>
				</li>
			</ul>
		</section>
		
		<!--输入密码-->
		<section class="enter_password">
			<div class="register_serve">
				<i class="iconfont icon-jiaochacross78" id="close_b"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<form action="" method="post">
				<div class="password_logo">
					<img src="img/password_logo.png"/>
				</div>
				<ul class="password_frame">
					<li class="p_frame_a p_enter_frame">
						<i class="iconfont icon-ren111"></i>
						<div>
							<input type="text" name="" id="" placeholder="请输入已验证的手机号或邮箱" />
						</div>
					</li>
					<li class="p_frame_a p_enter_frame">
						<i class="iconfont icon-026caozuo_suoding"></i>
						<div>
							<input type="password" name="" id="" placeholder="请输入密码" />
						</div>
					</li>
					<li class="p_frame_a p_forget">
						<i class="iconfont icon-wenhao">忘记密码</i>
					</li>
					<li class="p_frame_a">
						<a class="enter_color">登录</a>
					</li>
					<li class="p_frame_a">
						<a href="" class="register_color">注册</a>
					</li>
				</ul>
			</form>
		</section>
		
		<!--成功登录页-->
		<section class="signin_content">
			<div class="register_serve">
				<i class="iconfont icon-jiaochacross78" id="close_c"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<div class="register_select signin_select">
				<a href="" class="select_pic">
					<div class="pic_fra">
						<img src="img/sign_pic.jpg"/>
					</div>
					<span>1</span>
				</a>
				<p class="my_center">
					<span>陈小敏</span>
					<a href="">个人中心 > </a>
				</p>
				<div class="sign_star">
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
				</div>
				<p class="sign_fans">
					<a href="">关注<span>36</span></a>
					<a href="">粉丝<span>290</span></a>
				</p>
				<div class="my_collect">
					<a href="" class="red">我的收藏</a>
					<a href="">我的发布</a>
				</div>
			</div>
			<ul class="register_menu">
				<li class="menu_content">
					<p>GIMC</p>
					<p class="tran_roate">></p>
				</li>
				<li class="hid_content">
					<p class="bot_bor">省广介绍</p>
					<p>新闻资讯</p>
				</li>
				<li class="menu_content">
					<p>文章</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>资源</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>课程</p>
					<p>></p>
				</li>
			</ul>
		</section>
		
		<!--搜索框-->
		<section class="search_box" id="del_search_box">
			<div class="search_out">
				<div class="search_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
				<p id="search_del">取消</p>
			</div>
			<p class="hot_search_title">热搜</p>
			<ul class="hot_search_label">
				<li>项目管理</li>
				<li>移动互联网</li>
				<li>O2O联转化</li>
				<li>O2O</li>
				<li>媒介平台</li>
				<li>细分平台业务</li>
				<li>项目管理</li>
				<li>移动互联网</li>
				<li>O2O联转化</li>
			</ul>
		</section>
	</body>
	<!--轮播图-->
	<script src="js/carousel-jq.js"></script>
	<script src="js/carousel.js"></script>
	
	<script type="text/javascript">
		new carousel(".carousel",306/640)
	</script>
	
	<!--点击事件-->
	<script src="js/touch.js"></script>
	
	<script type="text/javascript">
		var lista = document.querySelector("#lista")
		var resourceintroduce = document.querySelector(".resource_introduce")
		var backshare = document.querySelector(".back_share")
		var back = document.querySelector(".icon-fanhui")
			lista.addEventListener("touchend",function(){
				{
					resourceintroduce.style.transform="translateX(0)";
					resourceintroduce.style.transition="all 1s";
					backshare.style.transform="translateX(0)";
				}
			})
			back.addEventListener("touchend",function(){
				{
					resourceintroduce.style.transform="translateX(100%)";
					resourceintroduce.style.transition="all 1s";
					backshare.style.transform="translateX(100%)";
				}
			})
	</script>
</html>

